<template>
  <div class="mainParamsList">
    <el-button
      type="primary"
      class="addBtn"
      ref="addBtn"
      @click="addCateParam()"
      :disabled="isAble || !$store.state.btn_permission.includes('156')"
      >{{ btnName }}</el-button
    >

    <el-table :data="tableData" style="width: 100%" border>
      <el-table-column label="参数名称">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.attr_name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="handleEdit(scope.row)"
            v-has="157"
            :disabled="!$store.state.btn_permission.includes('157')"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)"
            v-has="157"
            :disabled="!$store.state.btn_permission.includes('157')"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 编辑 / 添加-->
    <edit-params-dialog></edit-params-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { delCateAttribute } from "@/api/goods";
import editParamsDialog from "./editParmsDialog.vue";

export default {
  name: "mainParamsList",
  data() {
    return {};
  },
  props: ["btnName"],
  methods: {
    handleEdit(row) {
      this.$bus.$emit(
        "editParamsDialogVisible",
        row.attr_id,
        row.attr_name,
        row.attr_vals,
        "",
        "编辑参数"
      );
    },
    handleDelete(row) {
      // console.log(row.attr_id);
      this.$confirm("确定删除该参数?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delCateAttribute(row.attr_id).then((res) => {
            if (res.status === 200) {
              this.$message.success("参数删除成功");
              //刷新
              this.$bus.$emit("delCateAttrSuccess");
            } else this.$message.info("已取消删除");
          });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    addCateParam() {
      this.$bus.$emit(
        "editParamsDialogVisible",
        "",
        "",
        "",
        this.btnName === "添加动态参数" ? "many" : "only",
        "title"
      );
    },
  },
  components: { editParamsDialog },
  computed: {
    ...mapState(["isAble", "tableData", "selectLevel"]),
  },
};
</script>

<style  scoped>
.addBtn {
  width: 104px;
  height: 28px;
  padding: 0;
  font-size: 13px;
  margin-bottom: 15px;
}
</style>

